<template>
  <div class="box-card">
    <div class="top">
      <el-button type="success" @click="dialogFormVisible = true">
        添加菜单
      </el-button>
    </div>
    <div class="cneter">
      <el-table
        :data="tableData"
        style="width: 100%"
        default-expand-all
        row-key="id"
      >
        <el-table-column label="标题" width="180">
          <template #default="{ row }">
            <i v-if="!row.pid" class="el-icon-folder-opened"></i>
            <i v-else class="el-icon-folder"></i>
            <span style="margin-left: 10px">{{ row.title }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="code" label="权限点代码" width="780">
        </el-table-column>
        <el-table-column prop="name" label="操作" width="180">
          <template #default="{ row }">
            <el-button type="text" size="small" @click="bianjifn(row.id)">
              编辑
            </el-button>
            <el-button type="text" size="small" @click="delmenufn(row.id)">
              删除
            </el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <!-- 添加然层 -->
    <div>
      <el-dialog title="添加菜单" :visible.sync="dialogFormVisible">
        <el-form :model="form" ref="addForm" :rules="addRules">
          <el-form-item label="权限组名称" :label-width="formLabelWidth">
            <!-- <el-radio v-model="radio" label="1">菜单</el-radio>
            <el-radio v-model="radio" label="2">权限点</el-radio> -->
            <el-radio-group v-model="form.is_point">
              <el-radio :label="false"> 菜单列表 </el-radio>
              <el-radio :label="true"> 权限点 </el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item label="权限组名称" :label-width="formLabelWidth">
            <el-select v-model="form.pid" placeholder="请选择">
              <el-option label="主导航" :value="0" />
              <el-option
                :label="item.title"
                :value="item.id"
                v-for="item in quanxuanzu"
                :key="item.id"
              ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item
            label="权限代码"
            :label-width="formLabelWidth"
            prop="code"
          >
            <el-input v-model="form.code"></el-input>
          </el-form-item>
          <el-form-item
            label="权限标题"
            :label-width="formLabelWidth"
            prop="title"
          >
            <el-input v-model="form.title"></el-input>
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="dialogFormVisible = false">取 消</el-button>
          <el-button type="primary" @click="tijaiofn"> 确 定 </el-button>
        </div>
      </el-dialog>
    </div>
    <!-- 编辑碳层 -->
    <div>
      <el-dialog title="编辑菜单" :visible.sync="dialogFormVisible1">
        <el-form :model="form1" ref="addForm">
          <el-form-item label="权限组名称" :label-width="formLabelWidth">
            <!-- <el-radio v-model="radio" label="1" disabled>菜单</el-radio>
            <el-radio v-model="radio" label="2" disabled>权限点</el-radio> -->
            <el-radio-group v-model="form.is_point">
              <el-radio :label="false" disabled> 菜单列表 </el-radio>
              <el-radio :label="true" disabled> 权限点 </el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item label="权限组名称" :label-width="formLabelWidth">
            <el-select v-model="form1.pid" placeholder="请选择">
              <el-option label="主导航" :value="0" />
              <el-option
                :label="item.title"
                :value="item.id"
                v-for="item in quanxuanzu"
                :key="item.id"
              ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="权限代码" :label-width="formLabelWidth">
            <el-input v-model="form1.code"></el-input>
          </el-form-item>
          <el-form-item label="权限标题" :label-width="formLabelWidth">
            <el-input v-model="form1.title"></el-input>
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="dialogFormVisible1 = false">取 消</el-button>
          <el-button type="primary" @click="submitfn"> 确 定 </el-button>
        </div>
      </el-dialog>
    </div>
  </div>
</template>

<script>
import {
  getmenulistapi,
  addmenuapi,
  editmenuapi,
  editnewmenuapi,
  delmenuapi
} from '@/api/table'
import { translisttreedata } from '@/utils/index'
export default {
  data() {
    return {
      defaultProps: {
        children: 'children',
        label: 'label'
      },
      // 菜单树形数据
      menusList: [],
      // 菜单列表数据
      menus: [],
      tableData: [],
      quanxuanzu: [],
      formLabelWidth: '120px',
      dialogFormVisible: false,

      dialogFormVisible1: false,
      radio: '1',
      quanxian: '',
      form: {
        code: '',
        id: '',
        is_point: false,
        pid: '',
        title: ''
      },
      form1: {
        code: '',
        id: '',
        is_point: false,
        pid: '',
        title: ''
      },
      addRules: {
        code: [
          {
            required: true,
            message: '请输入权限代码',
            trigger: ['blur', 'change']
          }
        ],
        title: [
          {
            required: true,
            message: '请输入权限标题',
            trigger: ['blur', 'change']
          }
        ]
      }
    }
  },
  async created() {
    this.getmenufn()
  },
  methods: {
    // handleNodeClick(data) {
    //   console.log(data)
    // },
    // 处理树转列表数据函数
    handle(tree) {
      const arr = []
      tree.forEach((item) => {
        // 判断有无孩子
        if (item.points) {
          const children = this.handle(item.points)
          delete item.points
          arr.push(item, ...children)
        } else if (item.childs) {
          const children = this.handle(item.childs)
          delete item.childs
          arr.push(item, ...children)
        } else {
          arr.push(item)
        }
      })
      return arr
    },
    async getmenufn() {
      const res = await getmenulistapi()
      const arr = this.handle(res.data)
      this.quanxuanzu = arr
      this.tableData = translisttreedata(arr, null)
    },
    async tijaiofn() {
      await addmenuapi(this.form)
      this.getmenufn()
      this.dialogFormVisible = false
      this.form = {}
    },
    async bianjifn(id) {
      this.dialogFormVisible1 = true
      const res = await editmenuapi(id)
      this.form1 = res.data
      console.log(res)
    },
    async submitfn() {
      await editnewmenuapi(this.form1)
      this.getmenufn()
      this.dialogFormVisible1 = false
      this.form = {}
      this.form1 = {}
    },
    async delmenufn(id) {
      await delmenuapi(id)
      this.getmenufn()
      this.$message.success('删除成功')
    }
  }
}
</script>

<style scoped>
.box-card {
  padding-right: 15px;
  margin-top: 50px;
}
.top {
  margin: 10px;
  display: flex;
  justify-content: flex-end;
}
.cneter {
  margin: 10px;
}
</style>
